<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>维修配件明细</title>
<script src="/js/vue.js"></script>
		<script src="/js/axios.js"></script>
		<script src="/js/qs.js"></script>
		<script src="/js/jquery.min.js"></script>
		<!-- import Vue.js -->
		<script src="//vuejs.org/js/vue.min.js"></script>
		<!-- import stylesheet -->
		<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
		<!-- import iView -->
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			#max {
				margin: 0 auto;
				width: 90%;
			}

			.el-table__header th,
			.el-table__header tr {
				background-color: #dee1e6;
				color: black;
			}
		</style>
	</head>
	<body>
		<div id="max">
			<div id="app" style="width: 95%; margin: 0 auto;  margin-top: 2%;">
			<p style="line-height: 40px;font-size: 15px;font-weight: 550;">维修工单配件和服务明细
			</p>
				<template>
					<el-table ref="multipleTable" :summary-method="getSummaries" border :data="tableData3" show-summary tooltip-effect="dark"
					 style="width: 100%;border-radius: 8px;" @selection-change="handleSelectionChange" highlight-current-row>
						<el-table-column type="selection" width="55" align="center">
						</el-table-column>
						<el-table-column prop="p_name" show-overflow-tooltip label="产品名" width="200px" align="center">
						</el-table-column>
						<el-table-column prop="price" label="成交价" align="center">
							<template slot-scope="{row,$index}">
								<el-input v-model="row.price" @change="updatePrice(row)" type="number" placeholder="请输入内容">{{row.money | rounding}}</el-input>
							</template>
						</el-table-column>
						<el-table-column prop="price1" label="销售价" align="center">
						</el-table-column>
						<el-table-column prop="count" label="数量" align="center">
							<template slot-scope="{row,$index}">
								<el-input-number v-model="row.count" type="number" style="width: 100px;" controls-position="right" @change="handleChangeNum(row)"
								 :min="0" label="描述文字"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="discount" label="折扣" align="center">
							<template slot-scope="{row,$index}">
								<el-input-number v-model="row.discount" style="width: 110px;" :precision="2" :step="0.05" controls-position="right"
								 @change="handleChangeDiscount(row)" :min="0.1" :max="1" label="描述文字"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="money" label="金额" align="center">
							 <template slot-scope="scope">
								  <span>{{scope.row.money | rounding}}</span>
								  </template>
						</el-table-column>
						<el-table-column prop="remark" show-overflow-tooltip label="备注" align="center">
							<template slot-scope="{row,$index}">
								<el-input type="textarea" style="width: 100%;" :rows="12" :autosize="{ minRows: 1 }" placeholder="" v-model="row.remark"
								 style="width: 80%;"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="操作" align="center">
							<template slot-scope="scope">
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;" @click="deletenew(scope.$index, tableData3)"></i>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<el-tooltip content="Bottom center" placement="bottom">
					<div slot="content">添加产品</div>
					<div @click="value1 = true" style="width: 100px; height: 100px; cursor: pointer; line-height: 100px; text-align: center; background-color: #0080FF; border-radius: 50%;position: fixed; right: 8%; bottom: 10%;width: 79px;height: 77px;">
						<icon size="51"  style="color: white;margin: auto,auto; margin-top: 13px;" type="md-add-circle" />
					</div>
				</el-tooltip>

				<!-- 产品选择页 -->
				<drawer title="选择产品" :closable="true" width="30" v-model="value1">
					<div style="margin-bottom: 8px;">
						<el-input style="width: 370px;" placeholder="产品名" v-model="oneGood">
							<el-button slot="append" @click="inputGood()" style="width: 70px;">产品</el-button>
						</el-input>
					</div>
					<div style="height: 30px;line-height: 30px;font-size: 15px;">
						<i-span v-for="item in proAlls">
							<a style="color: #333333;" @click="addpro(item)">{{item.name}}</a><br />
						</i-span>
					</div>
				</drawer>
				<el-button type="info" @click="saveOrderItem" style="display: block; margin: 0 auto; margin-top: 4%;" plain>保存明细数据</el-button>
				<div id="dg" style="z-index: 9999;background-color: #0030CE; position: fixed ! important; right: 10%; top: 90%;">
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var repairorderItemView = ${repairorderItemView};
			//var repairProductItem=${repairProductItem};
			var pros = ${proAll};
			console.log("产品："+pros);
			var rid=${rid};
			var vue = new Vue({
				el: "#app",
				data: {
					tableData3: repairorderItemView,
					multipleSelection: [],
					restaurants:[],//获取的产品
					input: '',
					value1: false,
					buttonSize: 'large',
					proAlls: pros,
					oneGood:''
				},
				methods: {
					//根据输入筛选产品
					inputGood(){
						console.log(this.proAlls);
						var _this=this;
						axios.post("/aftersale/selectProduceOne",
							Qs.stringify({
							'search':_this.oneGood
							}
							,{arrayFormat: 'brackets'})
						 ).then(function(v){					          				
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data.productAllTable);
							_this.proAlls= v.data.productAllTable; 
						})
						
					},
					toggleSelection(rows) {
						if (rows) {
							rows.forEach(row => {
								this.$refs.multipleTable.toggleRowSelection(row);
							});
						} else {
							this.$refs.multipleTable.clearSelection();
						}
					},
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},
					handleChangeNum(value) {
						var expr = /^\+?[1-9][0-9]*$/;
						if(expr.test(value.count)){
							value.price = parseFloat(value.price1) * parseFloat(value.discount);
							var sumMoney = parseFloat(value.price) * parseFloat(value.count);
							value.money = sumMoney;
						}else{
							value.count=0;
							value.price = parseFloat(value.price1) * parseFloat(value.discount);
							var sumMoney = parseFloat(value.price) * parseFloat(value.count);
							value.money = sumMoney;
						}
						console.log(value);
					},
					handleChangeDiscount(value) {
						var expr1 = /\b0(\.\d{1,2})\b/;
						if(expr1.test(value.discount)){
							value.price = parseFloat(value.price1) * parseFloat(value.discount);
							var sumMoney = parseFloat(value.price) * parseFloat(value.count);
							value.money = sumMoney;
						}else{
							value.discount=0.1;
							value.price = parseFloat(value.price1) * parseFloat(value.discount);
							var sumMoney = parseFloat(value.price) * parseFloat(value.count);
							value.money = sumMoney;
						}
						console.log(value);
					},
					getSummaries(param) {
						const {columns,data} = param;
						const sums = [];
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[index] = '总计';
								return;
							}
							const values = data.map(item => Number(item[column.property]));
							if (!values.every(value => isNaN(value))) {

								sums[index] = values.reduce((prev, curr) => {
									const value = Number(index);
									if (!isNaN(value) || index != 6) {
										return prev + curr;
									} else {
										return '';
									}
								}, 0);
								if (index == 3 || index == 1 || index == 7) {
									sums[index] = '';
								}
								if (index == 4 || index == 5)
									sums[index] = '---';
								if (index == 6) {
									sums[index] = sums[index].toFixed(2);
									sums[index] += '元';
								}
							} else {
								sums[index] = '';
							}
						});
						return sums;
					},
					deletenew(index, rows) {
						rows.splice(index, 1);
					},
					saveOrderItem() {
						var _this=this;
						var params = new URLSearchParams();
		                params.append('proitem',JSON.stringify(this.tableData3));
						params.append('ID',rid);
						axios.post("/aftersale/saveRepairProductItem",params
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v);
							window.location.href = '/aftersale/openRepairView?id=' + rid;
						}).catch(function() {
							alert("出错了");
						});
					},
					//点击添加一条工单配件信息
					addpro(item) {
						var tableData2 = {
							ID: '',
							pId:'',
							p_name: '',
							price: '',
							rId:rid,
							price1: '',
							count: 1,
							discount: 1,
							money: 36,
							remark: ''
						};
						var boo = false;
						var j = 0;
						for (var i = 0; i < repairorderItemView.length; i++) {
							if (repairorderItemView[i].pId == item.ID) {
								boo = true;
								j = i;
							}
						}
						if (boo) {
							repairorderItemView[j].count += 1;
							this.value1 = false;
							var sumMoney = repairorderItemView[j].price * repairorderItemView[j].count;
							repairorderItemView[j].money = sumMoney;
						} else {
							tableData2.pId=item.ID;
							tableData2.p_name = item.name;
							tableData2.price = item.price;
							tableData2.price1 = item.price;
							tableData2.money = item.price;
							this.value1 = false;
							this.tableData3.push(tableData2);
						}
					},
					updatePrice(row) {
						var v = /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
						if (v.test(row.price)) {
							if (row.price > row.price1) {
								row.price = row.price1;
							}
						} else {
							row.price = row.price1;
						}
						var disc = row.price / row.price1;
						row.discount = disc.toFixed(2);
						var sumMoney = row.price * row.count;
						row.money = sumMoney;
					}
				},
				filters: {
					rounding(value) {
						return value.toFixed(2)
					}
				},
				mounted: function() {
					for (var i = 0; i < repairorderItemView.length; i++) {
						repairorderItemView[i].price = repairorderItemView[i].price1 * repairorderItemView[i].discount;
					}
				}
			})
		</script>


	</body>
</html>